<template>
    <el-dialog v-model="dialogVisible" title="段末加停顿" width="500px">
        <el-row :gutter="20">
            <!-- 第1行 -->
            <el-col :span="18">
                <div style="display: flex;flex-direction: row;justify-content:left;align-items: center;">
                    <el-radio v-model="radio" label="all" style="margin-right: auto;">所有段落</el-radio>
                    <el-radio v-model="radio" label="current" style="margin-right: auto;">当前段落</el-radio>
                </div>
            </el-col>
            <el-col :span="6">
                <el-checkbox v-show="radio=='all'" v-model="blankLine">空白行加停顿</el-checkbox>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px;">
            <!-- 第2行 -->
            <el-col :span="6">
                <el-button style="width: 100%;" @click="pauseTime = '100ms'; inputTextFocus = false;"
                plain>100ms</el-button>
            </el-col>
            <el-col :span="6">
                <el-button style="width: 100%;" @click="pauseTime = '150ms'; inputTextFocus = false;">150ms</el-button>
            </el-col>
            <el-col :span="6">
                <el-button style="width: 100%;" @click="pauseTime = '200ms'; inputTextFocus = false;">200ms</el-button>
            </el-col>
            <el-col :span="6">
                <el-button style="width: 100%;" @click="pauseTime = '300ms'; inputTextFocus = false;">300ms</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 10px;">
            <!-- 第3行 -->
            <el-col :span="6">
                <el-button style="width: 100%;" @click="pauseTime = '400ms'; inputTextFocus = false;">400ms</el-button>
            </el-col>
            <el-col :span="6">
                <el-button style="width: 100%;" @click="pauseTime = '600ms'; inputTextFocus = false;">600ms</el-button>
            </el-col>
            <el-col :span="12">
                <el-input v-model="inputTextTime" @focus="handleFocus" @input="handleInput" placeholder="请输入数字"
                    type="number" min="0">
                </el-input>
            </el-col>
        </el-row>
        <el-divider />
        <el-row :gutter="20" style="margin-top: 10px; text-align: right;">
            <!-- 第4行 -->
            <el-col :span="24">
                <div style="display: flex;flex-direction: row;justify-content:right;align-items: center;">
                    <el-button @click="handleReset" style="margin-left: auto;width:100px;">恢复默认</el-button>
                    <el-button @click="handleCancel" style="width:100px;">取消</el-button>
                    <el-button type="primary" @click="handleConfirm" style="width:100px;">确定</el-button>
                </div>
            </el-col>
        </el-row>
    </el-dialog>
</template>

<script lang="ts">
export default {
    name: 'DuanMoJiaTingDun'
}
</script>

<script setup lang="ts">
import { ref, defineEmits, onMounted } from 'vue';
import { ElDialog, ElRow, ElCol, ElButton, ElInput, ElMessage } from 'element-plus';

// 定义 emits
const emit = defineEmits(['DuanMoJiaTingDunCompleted']);

// 对话框可见性
const dialogVisible = ref(false);

// 单选框状态
const radio = ref('all');

// 复选框状态
const blankLine = ref(false);

// 停顿时间文本
const pauseTime = ref('');

// 文本框录入的时间文本
const inputTextTime = ref('');

// 获取焦点
const inputTextFocus = ref(false);

/**
 * 处理焦点事件
 */
const handleFocus = () => {
    pauseTime.value = "";
    inputTextFocus.value = true;
}

/**
 * 处理输入框输入事件，只允许输入数字
 * @param value 输入的值
 */
const handleInput = (value: string) => {
    const regex = /^[0-9]*$/; // 只允许输入数字
    if (!regex.test(value)) {
        inputTextTime.value = value.replace(/[^\d]/g, ''); // 移除非数字字符
    }
};

/**
 * 处理确定按钮点击事件
 */
const handleConfirm = () => {
    let args={
        paragraph: radio.value,
        blankLine: blankLine.value,
        reset:false
    }

    if(radio.value=='current'){
        args.blankLine=false;
    }

    if (inputTextFocus.value == true) {
        if (inputTextTime.value == "" || inputTextTime.value == null || inputTextTime.value == undefined) {
            ElMessage({
                message: '请录入停顿时间',
                type: 'warning',
            })
        }
        else {
            emit('DuanMoJiaTingDunCompleted', '#!' + inputTextTime.value + 'ms#',args);
            inputTextTime.value = "";
            dialogVisible.value = false;
        }
    }
    else {
        // 没有录入文本框，使用按钮的默认值
        emit('DuanMoJiaTingDunCompleted', '#!' + pauseTime.value + '#',args);
        inputTextTime.value = "";
        dialogVisible.value = false;
    }
};

/**
 * 处理取消按钮点击事件
 */
const handleCancel = () => {
    console.log('取消操作');
    dialogVisible.value = false;
    radio.value='all';
    blankLine.value=false;
};

/**
 * 处理恢复默认按钮点击事件
 */
const handleReset = () => {
    let args={
        paragraph: radio.value,
        blankLine: blankLine.value,
        reset:true
    }    
    emit('DuanMoJiaTingDunCompleted', '',args); 
    dialogVisible.value = false;
};

// 组件挂载时重置输入框值
onMounted(() => {
    inputTextTime.value = "";
    radio.value="all";
});

// 暴露 dialogVisible 以便外部控制
defineExpose({
    dialogVisible
});

</script>

<style scoped>
.el-dialog__header {
    text-align: left;
}
</style>